<template>
  <!-- 人工派单 -->
  <div ref="container">
    <a-form @submit="handleSubmit" :form="form" :bordered="false">
      <a-modal width="70%" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel">
        <template slot="footer">
          <a-button key="cancel" class="common-btn" @click="handleCancel">取消</a-button>
          <a-button key="submit" class="common-btn" @click="handleSubmit">确认</a-button>
        </template>
        <a-card :bordered="false" title="派单信息">
          <a-button class="common-btn" @click="go_toOperation('create', '')" slot="extra">按报警级别排序</a-button>
          <a-button class="common-btn" @click="go_toOperation('create', '')" slot="extra" style="margin:0 3px;">按优先级排序</a-button>
          <a-button class="common-btn" @click="go_toOperation('create', '')" slot="extra">按确认时间排序</a-button>
          <a-table :columns="columns" :dataSource="loadData" :rowSelection="{onChange: onSelectChange}" :loading="loading" :pagination="false"></a-table>
        </a-card>
      </a-modal>
    </a-form>
  </div>
</template>

<script>
// import { getSupplierList } from '@/api/mockdata'
export default {
  name: 'DetailsModel',
  components: {},
  data() {
    return {
      form: this.$form.createForm(this),
      visible: false,
      loading: false,
      confirmLoading: false,
      selectedRowKeys: [],
      // 表头
      columns: [
        {
          title: '报警级别',
          width: '15%',
          dataIndex: 'name'
        },
        {
          title: '优先级',
          width: '15%',
          dataIndex: 'department'
        },
        {
          title: '确认时间',
          width: '15%',
          dataIndex: 'sex'
        },
        {
          title: '报警点',
          width: '20%',
          dataIndex: 'personCode'
        },
        {
          title: '用户',
          width: '15%',
          dataIndex: 'user'
        },
        {
          title: '联系电话',
          width: '15%',
          dataIndex: 'tel'
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: []
    }
  },
  created() {
    this.loading = true
    this.getData()
  },
  methods: {
    add() {
      this.visible = true
    },
    handleSubmit() {
      const that = this
      this.$confirm({
        title: '确认派单吗',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          that.$success({
            title: '派单成功'
          })
          that.visible = false
        }
      })
    },
    go_toOperation() {
      this.$success({
        title: '排序成功'
      })
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRows
    },
    getData() {
      this.loading = false
      const data = [
        {
          name: 'A',
          department: '3',
          sex: '2020/02/28',
          personCode: '小店区北格镇小戈村',
          user: '小村居委会',
          tel: '18899999999'
        },
        {
          name: 'B',
          department: '2',
          sex: '2020/02/28',
          personCode: '小店区北格镇小戈村',
          user: '小村居委会',
          tel: '18899999999'
        },
        {
          name: 'A',
          department: '3',
          sex: '2020/02/28',
          personCode: '小店区北格镇小戈村',
          user: '小村居委会',
          tel: '18899999999'
        },
        {
          name: 'C',
          department: '1',
          sex: '2020/02/28',
          personCode: '小店区北格镇小戈村',
          user: '小村居委会',
          tel: '18899999999'
        },
        {
          name: 'A',
          department: '3',
          sex: '2020/02/28',
          personCode: '小店区北格镇小戈村',
          user: '小村居委会',
          tel: '18899999999'
        },
        {
          name: 'C',
          department: '1',
          sex: '2020/02/28',
          personCode: '小店区北格镇小戈村',
          user: '小村居委会',
          tel: '18899999999'
        }
      ]
      this.loadData = data
    },
    handleCancel() {
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>
.card-common {
  margin-bottom: 0px;
}
/deep/.ant-card-body {
  padding: 24px 24px 0;
}
/deep/.ant-form-item {
  margin-bottom: 0px;
}
</style>
